<template>
    <div class="app_container">
        <div id="statistics_gender" style="width: 100%; height:400px;"></div>
        <div id="statistics_age" style="width: 100%; height:400px;"></div>
    </div>
</template>

<script>
import { apiStatisticsGender, apiStatisticsAge } from "@/api/statistics.js";
import * as echarts from 'echarts';
export default {
    name: 'dashboard',
    data() {
        return {
        }
    },
    mounted() {
        apiStatisticsGender().then(({ data }) => {
            var myChart = echarts.init(document.getElementById('statistics_gender'));
            myChart.setOption({
                title: {
                    text: '用户男女比例饼状图',
                    subtext: '总用户：' + data.totalCount,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: data.maleCount, name: '男性人数' },
                            { value: data.femaleCount, name: '女性人数' },
                            { value: data.unknownCount, name: '未知性别人数' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }).catch((err) => { });
        apiStatisticsAge().then(({ data }) => {
            var myChart = echarts.init(document.getElementById('statistics_age'));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['20岁以下人数', '20-30岁人数', '30-40岁人数', '40-50岁人数', '50岁以上人数', '年龄未知人数']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [data.under20Count, data.age20To30Count, data.age30To40Count, data.age40To50Count, data.above50Count, data.unknownCount],
                        type: 'bar'
                    }
                ]
            });
        }).catch((err) => { });
    },
}
</script>

<style lang="scss" scoped>
.app_container {
    height: fit-content;
}
</style>